<template>
	<view class='wishList'>
		<!-- @click="click" -->
		<!-- <view class='wish'>
			<u-tabs :list="wishList" lineColor='#f8e801'></u-tabs>
		</view> -->
		<!-- <view class='wishOne dFlex jBetween_aCenter'>
			<view class='count'><text>1</text>个商品</view>
			<view class='wishTool dFlex jEnd_aCenter'>
				<view class='btnOne dFlex jCenter_aCenter edit' @click='edit'>
					<u-icon name="edit-pen" color='#ffffff'></u-icon>
				</view>
				<view class='btnOne dFlex jCenter_aCenter clear' @click='emptyList'>
					<u-icon name="trash" color='#ffffff'></u-icon>
				</view>
				<view class='btnOne dFlex jCenter_aCenter del'>
					<u-icon name="close" color='#ffffff' @click='delWish'></u-icon>
				</view>
				<u-switch class='default'></u-switch>
			</view>
		</view> -->
		<view class="discountList dFlex jBetween_aStart fWap" v-if='dataLists.length>0'>
			<view class='discount_one' v-for="(item,index) in dataLists" :key='index' @click="goDetail(item)">
				<view class="shopImg imgPublic dFlex jCenter_aCenter">
					<image :src="item.image" mode="widthFix"></image>
					<view class='delIcon dFlex jCenter_aCenter' @click.stop="delWish(item,index)">
						<u-icon name="close" color='#ffffff'></u-icon>
					</view>
				</view>
				<view class='shopInfo'>
					<view class="shopName">{{item.goods_name}}</view>
					<view class="shopPrice dFlex jStart_aCenter">
						<view class='oldPrice'>{{item.market_price}}</view>
						<view class='newPrice'>{{item.shop_price}} SAR</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else :text='$t("coupon.empty")' mode="data" >
		</u-empty>
		<!-- 编辑 -->
		<u-popup :show="editDialog" mode='center'>
			<view class='editContents'>
				<view class='title'>{{$t('wishList.edit_name')}}</view>
				<view class='content'>
					<u--input :placeholder="$t('wishList.placeholder1')" border="surround" v-model="editName"></u--input>
				</view>
				<view class='btns dFlex jBetween_aCenter'>
					<view class='btnOne' @click='editDialog = false'>{{$t('operateBtn.cancelBtn')}}</view>
					<view class='btnOne save'>{{$t('operateBtn.sureBtn')}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wishList: [],
				wishInfo: {},
				shopList: [1],
				// 编辑
				editDialog: false,
				editName: '',
				dataLists: [],
				page: 1,
				loadStatus: 'loadmore',
				data_count: 0
			};
		},
		onNavigationBarButtonTap(event) {
			this.editDialog = true;
			this.editName = '';
		},
		onLoad() {
			this.init();
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.$t('pages.wishList'),
			})
		},
		onPullDownRefresh() {
			this.dataLists =[];
			this.page = 1;
			this.init()
			
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		onReachBottom() {
			this.init();
		},
		methods: {
			async init() {
				const {
					dataLists,
					page,
					loadStatus,
					count
				} = await this.$tools.loadingFun('/user/collectlist', {}, this.dataLists, this.page, this.loadStatus);
				this.dataLists = dataLists;
				this.page = page;
				this.loadStatus = loadStatus;
				this.data_count = count
			},
			// 删除
			delWish(item, index) {
				const _this = this;
				uni.showModal({
					title: this.$t('wishList.tips1'),
					cancelText: this.$t("operateBtn.cancelBtn"),
					confirmText: this.$t("operateBtn.sureBtn"),
					success: (op) => {
						if (op.confirm) {
							_this.addFavorite(item)
							_this.dataLists.splice(index, 1)
						}
					}
				})
			},
			async addFavorite(item) {
				await this.$tools.addFavorite(item)
			},
			goDetail(item) {
				uni.navigateTo({
					url: './goodDetail?id=' + item.goods_id
				})
			},
			// 清空心愿清单
			emptyList() {
				uni.showModal({
					title: this.$t('wishList.tips2'),
					cancelText: this.$t("operateBtn.cancelBtn"),
					confirmText: this.$t("operateBtn.sureBtn"),
					success: (op) => {
						if (op.confirm) {

						}
					}
				})
			},
			// 编辑
			edit() {
				this.editDialog = true;
				// 可将wishInfo中的名称赋值
				this.editName = '';
			}
		}
	}
</script>

<style lang="scss">
	.btns {
		width: 100%;
		border-top: 1px solid #f8f8f8;

		.btnOne {
			text-align: center;
			width: 50%;
			color: #999999;
			padding: 10px 0;
		}

		.save {
			background: $main;
			color: white;
		}
	}

	::v-deep.u-popup__content {
		border-radius: 5px;
		width: 70vw;
		overflow: hidden;
	}

	.editContents {
		.content {
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			text-align: center;
			padding: 15px 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}
	}

	.discountList {
		width: 100%;
		padding: 0 12px;
		box-sizing: border-box;
		margin-top: 12px;

		.discount_one {
			.shopInfo {
				.shopPrice {
					width: 100%;

					.newPrice {
						font-weight: bold;
						font-size: 16px;
					}

					.oldPrice {
						text-decoration: line-through;
						margin-right: 10px;
					}
				}

				.shopName {

					width: 100%;
					overflow: hidden;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					margin-bottom: 5px;
				}

				width:100%;
				padding:10px;
				box-sizing: border-box;
				// background:#ececec;
			}

			.shopImg {
				.delIcon {
					background: #fa3534;
					width: 24px;
					height: 24px;
					border-radius: 50%;
					position: absolute;
					top: 12px;
					right: 12px;
				}

				width: 168px;
				height: 168px;
				background: white;
				position: relative;
			}

			width:168px;
			margin-bottom: 15px;
			overflow: hidden;
			background:white;
			border-radius:3px;
			box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
		}
	}

	.wishOne {
		.wishTool {
			flex: 1;

			.default {
				transform: scale(0.7);
				margin-left: 12px;
			}

			.del {
				background: #fa3534;
			}

			.clear {
				background: #f29100;
			}

			.edit {
				background: $main;
			}

			.btnOne {
				width: 24px;
				height: 24px;
				border-radius: 50%;
			}

			.btnOne:nth-child(2) {
				margin: 0 10px;
			}
		}

		.count {
			color: #999999;

			text {
				font-weight: bold;
				color: #333333;
				font-size: 16px;
				display: inline-block;
				margin-right: 5px;
			}
		}

		width:100%;
		padding:10px;
		box-sizing: border-box;
		background: white;
	}

	.wish {
		width: 100%;
		background: white;
	}
</style>